<script setup lang="ts">
import { ref } from 'vue'

// 1. 创建响应式数据
const hp = ref(100)          // 英雄血量
const attacking = ref(false) // 是否正在攻击

// 2. 修改数据
const attack = () => {
  attacking.value = true
  setTimeout(() => {
    hp.value -= 20
    attacking.value = false
  }, 500)
}
</script>

<template>
  <h2>勇者血量：{{ hp }}</h2>
  <button @click="attack" :disabled="attacking">
    {{ attacking ? '攻击中...' : '发起攻击' }}
  </button>
</template>